<template>
  <!-- 样式配置 -->
  <div>
    <el-tabs v-model="activeName" type="border-card" class="demo-tabs">
      <el-tab-pane label="样式设置" name="first">
        <Common></Common>
      </el-tab-pane>
      <!-- 数据配置 -->
      <el-tab-pane label="数据配置" name="second">
        <el-form-item label="标题名称:">
          <el-input
            v-model="modelItem.data.title"
            type="text"
            maxlength="15"
            show-word-limit
          />
        </el-form-item>
        <div
          v-for="(item, index) in modelItem.data.LIST"
          :key="index"
          class="awards-list"
        >
          <p>
            <span>奖项{{ index + 1 }}</span>
            <el-button
              :disabled="index === 0"
              type="danger"
              :icon="Delete"
              circle
              @click="deleteAwards(index)"
            />
          </p>
          <el-form-item label="日期选择:">
            <el-date-picker
              v-model="item.date"
              type="month"
              placeholder="Pick a month"
            />
            <el-switch v-model="modelItem.data.isShow.date" />
          </el-form-item>
          <el-form-item label="奖项名称:">
            <el-input
              v-model="item.awardsName"
              type="text"
              maxlength="40"
              show-word-limit
            />
            <el-switch v-model="modelItem.data.isShow.awardsName" />
          </el-form-item>
          <el-form-item label="所获奖项:">
            <el-input
              v-model="item.awardsGrade"
              type="text"
              maxlength="20"
              show-word-limit
            />
            <el-switch v-model="modelItem.data.isShow.awardsGrade" />
          </el-form-item>
        </div>
        <!-- 添加或删除奖项 -->
        <div class="addOrdelet">
          <el-button type="primary" @click="addAwards">添加奖项</el-button>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import Common from '@/options/Common.vue'
import { Delete } from '@element-plus/icons-vue'
import selectModelItem from '@/hooks/selectModel.ts' //当前选中模块
const modelItem = selectModelItem()
const activeName = ref('first')
// 添加奖项
const addAwards = (): void => {
  modelItem.data.LIST.push({
    date: '2021-9', // 获奖时间
    awardsName: '奖项名称',
    awardsGrade: '获奖等级',
  })
}
// 删除奖项
const deleteAwards = (index: number): void => {
  modelItem.data.LIST.splice(index, 1)
}
</script>
<style lang="scss" scoped>
.awards-list {
  p {
    display: flex;
    justify-content: center;
    height: 50px;
    align-items: center;
    margin-bottom: 10px;

    span {
      margin-right: 10px;
    }
  }
}

.addOrdelet {
  width: 100%;
  display: flex;
  height: 50px;
  align-items: center;
}
/* 日期选择器 */
:deep(.el-range-editor.el-input__wrapper) {
  width: 200px;
}
:deep(.el-input) {
  width: 80%;
  height: 27px;
  line-height: 27px;
  margin-right: 2px;
}

:deep(.el-form-item__label) {
  font-size: 13px;
}
:deep(.el-tabs--border-card) {
  border: 0;
}
</style>
